<template>
    <div class="loginStyle">
		<!-- 左侧logo 开始 -->
		<div class="logo" >
			<img src="../../assets/img/loginBack.png" />

		</div>
		<!-- 左侧logo 结束 -->
		<!-- 右侧表单 开始 -->
        <div class="login">
			<h2>后台管理系统</h2>
			<!--<img src="../../assets/img/loginLogo.png"  style="height:54px; margin-bottom:30px;" />-->
            <div class="qCode loginForm" v-if="qCode_isShow">
				<h2>扫描二维码下载app</h2>
				<div id="qrcode"></div>
				<div style="color: #fff;font-size: 12px;">仅支持安卓版本</div>
				 <el-row>
                    <el-button class="sub1" type="primary" width="100%" @click="qCode_isShow=false">
						返回登录
					</el-button>
                </el-row>
			</div>
			<div class="loginForm" v-else>
				<h2>用户登录</h2>
                <el-form ref="form" :model="form" :rules="rules">
                    <el-form-item prop="username" class="formItem clearfix">
                       <!-- <i class="el-icon-user-solid left"></i> -->
					   <span class="left">
						   <img src="../../assets/img/icon_name.png"/>
					   </span>


					   <el-input v-model="form.username" placeholder="请输入账号" class="width200 name left" @keyup.enter.native="onSubmit(form), rememberUser()" auto-complete="off" clearable></el-input>
					  	 <!-- <el-input style="position:fixed;bottom:-9999px;display:none;" class="code_width"></el-input> -->
					</el-form-item>
                    <el-form-item prop="password" class="formItem clearfix">
                       <!-- <i class="el-icon-s-goods left"></i> -->
					   <span class="left">
						   <img src="../../assets/img/icon_password.png"/>
					   </span>
					   <!-- <el-input type="password" style="position:fixed;bottom:-9999px;display:none;" class="code_width"></el-input> -->
					   <el-input type="password" v-model="form.password" placeholder="请输入密码" class="width200 name left" @keyup.enter.native="onSubmit(form), rememberUser()" auto-complete="off" clearable></el-input>

					</el-form-item>
					<el-row>
						<div class="left">
							<el-checkbox v-model="checked">记住密码</el-checkbox>
						</div>
						<div class="clear"></div>
					</el-row>
                </el-form>

                <el-row>
                    <el-button class="sub1" type="primary" @click.native="onSubmit(form), rememberUser()" width="100%" :loading = "isLoading">
						登录
					</el-button>
                </el-row>
            </div>





        </div>

    </div>
</template>
<script>
	import QRCode from 'qrcodejs2';
	import crypto from 'crypto';
	import { mapState, mapMutations } from 'vuex';
	export default{
		name:'login',
		data(){
			return{
				qCode_isShow:false,
				checked: true,isLoading:false,
				form:{
					username:'',//账号
					password:'',//密码
				},
				rules:{
					username:[
						{required:true,message:"请输入用户名",trigger:"blur"}
					],
					password:[
						{required:true,message:"请输入密码",trigger:"blur"},
						// {min:3,max:10,message:"密码长度为3-10位",trigger:"blur"},
					]
				}
			}
		},
		mounted() {
			this.getCookie()
		},

		methods:{
			qrCode() {
                this.qCode_isShow = true;
                this.$nextTick(function () {
                    document.getElementById("qrcode").innerHTML = "";
                    let qrcode = new QRCode("qrcode", {
                        width: 150,
                        height: 150,
                        text: "http://www.baodingkjxx.com:8000/download/",
                        colorDark: "#109dff",
                        colorLight: "#fff"
                    });
                });
            },


			/*登录*/
			...mapMutations(['changeMenu']),
			onSubmit(form){
				let _that = this
				 //判断复选框是否被勾选 勾选则调用配置cookie方法
				_that.$refs.form.validate((valid)=>{
					if(valid){
						_that.isLoading = true;
						_that.$http.post(_that.GLOBAL.REQUESTURL+"/api/login",{
							"account":_that.form.username,
							"password": _that.form.password
						}).then(function(res){
							console.log(res)
							if(res.code == 200){
								const loginData = res.data;
								if(!loginData) {_that.$message.info( res.msg );}
								console.log('login',loginData)
								_that.$store.commit('$_setToken', loginData.Token);					//token
								localStorage.setItem('VersionsetUser', loginData.Username); 				//导表权限
								localStorage.setItem('ID', loginData.ID);
								localStorage.setItem('RoleID',loginData.RoleID);						//角色权限
								_that.$http.get(_that.GLOBAL.REQUESTURL+"/api/menurole/"+loginData.ID)	//	获取菜单
								.then(response => {
									if(response.code == 200) {
										const menuData = response.data;
										let index = menuData.findIndex ((item) => item.State == true );
										let secIndex = menuData[index].Level.findIndex ((Ite) => Ite.State == true );
										if(index == -1 || secIndex == -1) { _that.$message.info('没有访问权限'); return false;};
										console.log(index,secIndex,menuData[index].Level[secIndex].Path)
										_that.$router.replace({path:menuData[index].Level[secIndex].Path});
										// _that.$router.replace({path:'/user_manage'});
										_that.changeMenu(menuData);
										_that.isLoading = false;
									} else {
										_that.$message.info(response.msg);
									};
								}).catch(err => {
									_that.$router.push({path:'/'})
									_that.isLoading = false
								});
							} else {
								_that.$message.info( res.msg );
								_that.isLoading = false;
							};
						}).catch(function(err){
							_that.isLoading = false
							// _that.$message.error('登录失败！');
						});
					}else{
						return false;
					}
				})
			},
			forgetPassword() {	//忘记密码
				this.$message({
					message: '请联系管理员',
					type: 'info'
				});
			},
			// 记住用户
			rememberUser() {
				const that = this;
				//判断复选框是否被勾选 勾选则调用配置cookie方法
				if (that.checked == true) {
					//传入账号名，密码，和保存天数三个参数
					that.setCookie(that.form.username, that.form.password, 7);
				} else {
					//清空Cookie
					that.clearCookie();
				}
			},
			//设置cookie
			setCookie(c_name, c_pwd, exdays) {
				let exdate = new Date(); //获取时间
				exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
				//字符串拼接cookie
				window.document.cookie =
					"username" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
				window.document.cookie =
					"password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
			},
			// 读取cookie
			getCookie: function() {
				let that = this;
				if (document.cookie.length > 0) {

					let arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
					for (let i = 0; i < arr.length; i++) {
						let arr2 = arr[i].split("="); //再次切割
						//判断查找相对应的值
						if (arr2[0] == "username") {
							that.form.username = arr2[1]; //保存到保存数据的地方
						} else if (arr2[0] == "password") {
							that.form.password = arr2[1];
						}
					}
				} else {
					this.checked = false
				}
			},
			//清除cookie
			clearCookie: function() {
				this.setCookie("", "", -1); //修改两个值都为空，天数为-1天就好了
			},
			getmd5(pwd){
				var md5 = crypto.createHash("md5");
				md5.update(pwd);
				var password = md5.digest('hex');
				return password;
			},
		}
	}
</script>
<style scoped>
	#qrcode {
		height: 200px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.clear {
		clear:both;
	}
	.loginStyle{
		/* position:relative; */
		width: 100%;
		height: 100%;
		/* overflow: hidden; */
		background: url('../../assets/img/loginBack.png') no-repeat;
		background-size: 100% 100%;
	}
	.loginStyle .logo{
		width: 100%;
		height: 100%;

	}
	.loginStyle .logo img{
		width: 100%;
		height: 100%;
	}
	.loginStyle .login{
		position: absolute;
		top:14%;
		left:0;
		right:0;

		width: 527px;
		/* height: 430px; */
		margin:auto;

	}
	.loginStyle .login h2{
		height: 40px;
		line-height: 40px;
		font-size: 49px;
		color: rgb(255, 255, 255);
		font-weight: bold;
		letter-spacing: 4px;
		margin-bottom: 34px;
	}
	.loginStyle .login .loginForm{
		width: 480px;
		height: auto;
		background: #fff;
		border-radius: 6px;
		padding: 25px;
	}
	.loginStyle .login .loginForm h2{
		font-size: 32px;
		font-weight: 400;
		color: #333;
		text-align:center;
		padding-top:10px;
	}
	.loginStyle span img{
		width: 18px;
		height:18px;
		padding: 10px;
		margin-top:6px;
	}
	.loginStyle .formItem{
		/* border: 2px solid #EBEBEB; */
		/* border-radius: 5px; */
		height: 40px;
	}
	.loginStyle .width200{
		width: 300px;
		height: 50px;
		line-height:50px;
	}
	input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
		-webkit-box-shadow: 0 0 0px 1000px #f8f8f8 inset
	}
	.loginStyle /deep/ input {background:none !important;}
	.loginStyle /deep/ .width200 .el-input__inner {
		border: none;
		background: none !important;
		color:#333;
	}
	.loginStyle /deep/ input:-webkit-autofill:focus,
	.loginStyle /deep/ input:-webkit-autofill:hover,
	.loginStyle /deep/ input:-webkit-autofill:focus {
		background: none;
	}
	.loginStyle .el-button--primary{
		width: 268px;
		height: 54px;
		line-height:54px;
		border-radius:none;
		padding:0;
		margin:0;
		background: #5EA0FF;
		margin-top: 30px;
		border: none;
	}

	.loginForm /deep/ .el-form-item__content {


	}
	.loginForm ::-webkit-input-placeholder { /* WebKit browsers */
		color: #333;
		font-size: 14px;
	}

	.loginForm ::-moz-placeholder { /* Mozilla Firefox 19+ */
		color: #333;
		font-size: 14px;
	}

	.loginForm :-ms-input-placeholder { /* Internet Explorer 10+ */
		color: #333;
		font-size: 14px;
	}
	.loginStyle /deep/ .el-button {
		border:none;
		border-radius:none;
	}
	.loginForm .el-form {
		margin: 0 33px;
	}
	.loginForm .el-checkbox__label {
		color:#fff;
		font-size:14px;
	}
	.loginForm .forgetPassword {
		color:#333;
		cursor: pointer;
		font-size: 14px;
	}
	.loginForm .el-form-item {
		margin-bottom: 40px;
		border:1px solid rgb(238, 238, 238);
		width: 100%;
		height: 50px;
		line-height: 50px;
	}
	.el-button {
		border-radius:none;
	}
	.login-footer {
		position:fixed;
		bottom:0;
		width: 100%;
		text-align:center;
		color:#65b8ff;

		height: 50px;
		padding-top: 10px;
	}
	.login-footer p {
		height: 20px;
		line-height:20px;
		color: #fff;
		font-size: 14px;
	}
	.el-input__inner {
		background: none;
		border:none;
		color:#333;
		font-size: 12px;
	}
	.loginForm .el-checkbox {
		color:#333;
	}
</style>
